<template>
  <div
    class="main-container"
    :style="'background-image:url(' + Background + ')'"
  >
    <div class="header">
      <div class="wrapper">
        <div class="logo">
          <h1><router-link to="/home" class="logo"> 手慧智言 </router-link></h1>
          <h2>欢迎登录</h2>
          <!-- <span>已有帐号，<a href="./login.html" class="login">请登录 &gt;</a></span> -->
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="Login">
        <div class="choose">
          <div class="left active">
            <a href="#" data-id="0" @click="changeAcLogin">帐号登录</a>
          </div>
          <div class="right active">
            <a href="#" data-id="1" @click="changeQrLogin">扫码登录</a>
          </div>
        </div>
        <div class="login" id="login" ref="login">
          <h1 class="login-title">帐号登录</h1>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            label-width="0px"
            class="login-form"
          >
            <div class="uname-box" id="uname-box">
              <input
                ref="account"
                v-model="loginForm.account"
                type="text"
                id="uname"
                auto-complete="off"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              />
            </div>
            <div class="pwd-box" id="pwd-box">
              <input
                v-model="loginForm.password"
                type="password"
                id="password"
                auto-complete="off"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                @keyup.enter="handleLogin"
              />
            </div>
            <div class="permit">
              <input
                type="checkbox"
                class="permit-checkbox"
                ref="permit"
                v-model="loginForm.permit"
                checked
              /><span
                >已阅读并同意<a href="#" class="permit-link"
                  >《用户服务协议》</a
                ></span
              >
            </div>
            <button
              class="login-btn"
              :loading="loading"
              type="submit"
              @click.prevent="handleLogin"
            >
              登录
            </button>
          </el-form>
          <!-- <form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            label-width="0px"
            class="login-form"
          >
            <div class="uname-box" id="uname-box">
              <input
                ref="account"
                v-model="loginForm.account"
                type="text"
                id="uname"
                auto-complete="off"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              />
            </div>
            <div class="pwd-box" id="pwd-box">
              <input
                v-model="loginForm.password"
                type="password"
                id="password"
                auto-complete="off"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                @keyup.enter="handleLogin"
              />
            </div>
            <div class="permit">
              <input
                type="checkbox"
                class="permit-checkbox"
                ref="permit"
                v-model="loginForm.permit"
              /><span
                >已阅读并同意<a href="#" class="permit-link"
                  >《用户服务协议》</a
                ></span
              >
            </div>
            <button
              class="login-btn"
              :loading="loading"
              type="submit"
              @click.prevent="handleLogin"
            >
              登录
            </button>
          </form> -->
          <div class="footer">
            <div class="forget"><a href="#">忘记密码？</a></div>
            <div class="register">
              <router-link to="/register"> 免费注册 </router-link>
            </div>
          </div>
        </div>
        <div class="login-QR" id="login" ref="loginQR" style="display: none">
          <h1 class="login-title">扫码登录</h1>
          <div class="QR-code">
            <img src="../assets/QR.jpg" alt="" width="200" height="200" />
          </div>
          <span class="itd"
            >&nbsp;&nbsp;&nbsp;请打开<a
              href="https://wx.qq.com/#:~:text=%E6%8F%90%E7%A4%BA%EF%BC%9A%E7%BD%91%E9%A1%B5%E7%89%88%E5%BE%AE%E4%BF%A1"
              >微信</a
            >或<a
              href="https://im.qq.com/index/#:~:text=%E8%85%BE%E8%AE%AFQQ%EF%BC%8C%E5%85%A8%E6%96%B0%E7%89%88"
              >QQ</a
            >扫码登录</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Background from "../assets/img/login-background.jpg";
import { mapState } from "vuex";
import Lockr from "lockr";
export default {
  name: "Login",
  data() {
    return {
      Background,
      loginForm: {
        account: "",
        password: "",
        peimit: true,
      },
      loginRules: {
        account: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },
  computed: {
    ...mapState({
      globalConfig: (state) => state.globalConfig,
    }),
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      // 获取url的参数
      let token = this.$route.query.token;
      if (token) {
        return this.dologin({ token: token });
      }
      // 如果是演示模式、获取1-20的随机数填充账号密码
      if (this.globalConfig.demon_mode) {
        const random = Math.floor(Math.random() * 19 + 2);
        this.loginForm.account = 13800000000 + random;
        this.loginForm.password = "123456";
        this.$refs.account.focus();
      }
    });
  },
  methods: {
    handleLogin() {
      // console.log(this.$refs.loginForm);
      this.$refs.loginForm.validate((valid) => {
        const data = {
          account: this.loginForm.account,
          password: this.loginForm.password,
        };
        if (this.loginForm.rememberMe) {
          Lockr.set("LoginAccount", data);
        } else {
          Lockr.rm("LoginAccount");
        }
        if (valid) {
          this.dologin(data);
        }
      });
    },
    dologin(data) {
      this.loading = true;
      this.$store
        .dispatch("Login", data)
        .then((res) => {
          window.location.reload();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeQrLogin() {
      this.$refs.login.style.display = "none";
      this.$refs.loginQR.style.display = "block";
      // console.log(this.$refs.);
    },
    changeAcLogin() {
      this.$refs.login.style.display = "block";
      this.$refs.loginQR.style.display = "none";
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
  /* background-image: url(../assets/login-background.jpg); */
}
a {
  text-decoration: none;
  color: black;
}
.main-container {
  width: 100%;
  height: 100vh;
  background-size: cover;
}
.wrapper {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 1440px;
  height: 800px;
  /* background-color: white; */
}
.login {
  position: absolute;
  top: 0px;
  right: 0px;
  overflow: hidden;
  margin: 0 auto;
  width: 400px;
  height: 400px;
  /* background-color: #fff; */
  background-color: white;

  opacity: 0.8;

  /* background-image: url(../Img/登陆背景1.jpg!cg845); */
}
.login-title {
  font-weight: normal;
  font-size: 26px;
  text-align: center;
  vertical-align: middle;
  margin-top: 20px;
  margin-bottom: 50px;
}
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
div[id] {
  position: relative;
  margin-bottom: 20px;
}
input[id] {
  width: 300px;
  height: 40px;
  padding: 0 10px;
  /* padding-left: 10px; */
  border: none;
  outline: none;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0);
}
input[id]::placeholder {
  color: #ccc;
  position: relative;
  left: 10px;
}
.code {
  display: flex;
  position: relative;
}
.code-btn {
  position: absolute;
  top: 9px;
  left: 205px;
}
.login-btn {
  margin-top: 10px;
  width: 300px;
  height: 40px;
  background-color: #27ba9b;
}
.permit {
  margin-bottom: 15px;
}
.permit-checkbox {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border-radius: 50%;
}
.permit-checkbox:checked {
  /* border-radius: 3px; */
  background-color: #27ba9b;
}
.permit-link {
  color: #023805;
}
.code-btn a {
  color: #27ba9b;
}
.error {
  position: absolute;
  top: 43px;
  left: 10px;
  display: none;
  margin-right: 175px;
  color: red;
  font-weight: bold;
  font-size: 12px;
}
.Login {
  position: absolute;
  top: 130px;
  right: 100px;
  width: 400px;
  height: 500px;
  background-color: #fff;
}
.choose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #0066ff; */
  width: 400px;
  height: 50px;
  border-bottom: #ccc 1px solid;
}
.left {
  margin-left: 30px;
}
.left a {
  display: inline-block;
  margin-bottom: 10px;
  /* color: white; */
}
.right {
  margin-right: 30px;
}
.right a {
  display: inline-block;
  margin-bottom: 10px;
  /* color: white; */
}
.choose a:hover {
  color: #007b06;
}
.active:hover {
  color: #27ba9b;
  border-bottom: #007b06 2px solid;
}
.login-QR {
  position: relative;
  /* background-color: #fff; */
}
.QR-code {
  position: absolute;
  top: 60px;
  left: 100px;
  display: block;
  /* background-color: #fff; */
}
.itd {
  position: absolute;
  top: 290px;
  left: 100px;
}
.footer {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.forget {
  margin-right: 30px;
}
.register {
  margin-left: 30px;
}
.header {
  position: fixed;
  top: -15px;
  /* left: 100px; */
  width: 100%;
  height: 105px;
  /* background-color: #fff; */
}
.header .wrapper {
  display: flex;
  margin: 0 auto;
  width: 1500px;
  margin-top: 10px;
}
.header .wrapper .logo .logo {
  display: block;
  width: 400px;
  height: 100px;
  background-image: url(../assets/font.png);
  /* background-color: rgba(220, 38, 38, 0.2); */
  font-size: 0px;
}
.header .logo {
  display: flex;
}
.header .logo h2 {
  font-size: 40px;
  font-weight: normal;
  margin-top: 30px;
}
.header .logo span {
  color: #ccc;
  margin-top: 50px;
  margin-left: 700px;
}
span .login {
  color: red;
  margin-top: 200px;
  text-decoration: underline;
  text-decoration-color: red;
  font-size: 20px;
}
</style>
